<template>
	<view class="container">
		<view class="title-box">
			<view class="title-item">{{info.majorName}}</view>
			<view class="title-item-box">
				<view class="title-label">所属层级</view>
				<view class="title-content">{{info.categoryTypeShow}}</view>
			</view>
			<view class="title-item-box">
				<view class="title-label">专业大类</view>
				<view class="title-content">{{info.majorCategoryName}}</view>
			</view>
		</view>
		<view class="content-box">
			<view class="content-title">专业介绍</view>
			<view class="content" v-html="info.majorDesc"></view>
		</view>
	</view>
</template>

<script>
	import { myRequest } from '../../utils'
	
	export default {
		data() {
			return {
				id: 0,
				info: {}
			}
		},
		
		onLoad(options) {
			this.id = options.id
			this.fetchData()
		},
		
		methods: {
			
			fetchData() {
				const that = this
				
				let success = function(res) {
					if (res.data.code != 20000) {
						uni.showModal({
							title: '提示',
							content: res.data.message
						})
						return
					}
					
					that.info = res.data.data
				}
				
				let param = {
					url: '/major/detail',
					data: {id: that.id}
				}
				
				myRequest(param, success)
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}
	
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.title-box {
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #ffffff;
		height: auto;
		margin-top: 20rpx;
	}
	
	.title-item {
		font-size: 30rpx;
		color: #5683ec;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: solid 1rpx #f5f5f5;
	}
	
	.title-item-box {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1rpx #f5f5f5;
	}
	
	.title-label {
		font-size: 24rpx;
		color: #666666;
	}
	
	.title-content {
		font-size: 28rpx;
		color: #333333;
	}
	
	.content-box {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
		background-color: #ffffff;
		height: auto;
	}
	
	.content-title {
		font-size: 30rpx;
		color: #333333;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: solid 1rpx #f5f5f5;
		margin-top: 20rpx;
	}
	
	.content {
		margin-top: 40rpx;
	}
</style>
